<template>
  <div class="alarmLevel-root">
    <formTitleVue
      title="报警等级分布"
      :selectOptions="selectOptions"
      @selectChange="selectChange"
    />
    <!-- <div id="echarts-types"></div> -->
    <myPieRing domId="earlyWarning-alarmLevel-echarts" height="30vh" :chartsData="chartsData" :myOption="echartsOption"/>
  </div>
</template>

<script>
  import formTitleVue from "@/components/FormTitle/formTitle.vue";
  import myPieRing from '@/components/Echarts/myPieRing.vue';
  import { time_select_optios } from '@/utils/global.js';
  import { alarmHandingLevel } from '@/api/alarm/statistics'
  export default {
    name: "alarmLevel",
    components: {
      formTitleVue,myPieRing,
    },
    data() {
      return {
        selectOptions: [
          {
            selectValue: "近一月",
            options:[
              { label: "近一月", value: "近一月" },
              { label: "近半年", value: "近半年" },
              { label: "近一年", value: "近一年" },
            ]
          }
        ],
        chartsData: {

          yData: [],
        },
        echartsOption:{

        },
        searChForm: {
          startTime: '',
          endTime: '',
          areaCode:'',
          placeType:''
        },
      };
    },
    methods: {
      selectChange(item) {
        console.log(item);
        this.searChForm.startTime = time_select_optios[item].startTime+" 00:00:00"
        this.searChForm.endTime = time_select_optios[item].endTime+" 23:59:59"
        this.getData();
      },
      async getData(){

        let respon =[]
        this.searChForm.areaCode = this.$store.state.account.user.deptIds;
        this.searChForm.placeType = this.$commonJs.getPlaceType(this.searChForm.areaCode);
        respon = await alarmHandingLevel(this.searChForm);
        let res = respon.data.report;

        // let res = [
        //       {value:3981, name:"市政设施"},
        //       {value:5928, name:"房屋建筑"},
        //       {value:2093, name:"交通设施"},
        //       {value:2198, name:"在建工地"},
        //       {value:3122, name:"人密区域"},
        //     ];
        // 模拟接口数据
        // let res = [
        //   {value: 335, name: '市政设施'},
        //   {value: 110, name: '房屋建筑'},
        //   {value: 160, name: '人员密集区域'},
        // ]
        this.chartsData.yData = [
          {
            name:"报警等级分布",
            radius : ['40%', '60%'],
            center: ["30%", "50%"],
            data: res
          }
        ]
        let total = 0
        // 给每个饼块统一添加引导文字
        this.chartsData.yData.forEach(item => {
          item.data.forEach(item => {
            // 隐藏引导线和文字
            item.label = {
              normal:{
                show: false,
                formatter: "{b}\n{d}%",
              },
            }
            item.labelLine = {
              show: false,
            }
            total += item.value
          })
        })
        this.echartsOption = {
          title:{
            text: `报警总数`,
            left: "29%",
            top: "42%",
            textVerticalAlign:'top',
            textAlign:'center',
            textStyle: {
              color: "#5A5A5A",
              fontSize: 12,
            },
            subtext: total,
            subtextStyle: {
              // verticalAlign:'top',
              color: "#5A5A5A",
              fontSize: 16,
            },
          },
          legend:{
            orient: 'vertical',
            top: 'middle',
            right: '5%',
            // formatter: 'Legend {name}',
            // 使用回调函数
            formatter: function (name) {
              for(let item of res){
                if(item.name == name){
                  let p
                  if(total == 0 || !item.value){
                    p = 0
                  }else{
                    p = (item.value/total*100).toFixed(2)
                  }
                  return `${name} ${item.value} 占比${p}%`
                }
              }
            }
          }
        }
      },
    },
    mounted() {
      // console.log(this.$store.state.account.user.deptIds)
      //this.getData();
      this.selectChange("近一月");
    },
  };
</script>

<style lang="scss" scoped>
  .alarmLevel-root {
    #echarts-alarmLevel {
      height: 30vh;
    }
  }
</style>

